<template>
  <div class="my">
      <div class="dingdan_top">
          <i> < </i>
          <span>我的</span>
      </div>
    <div class="my-top">
      <div class="my-left">
        <span><img src="../assets/logo.png"></span>
      </div>
      <div class="my-center">
        <span>登陆/注册</span>
        <p>
          <span><img src="../assets/logo.png"></span>
          登录后享受更多特权
        </p>
      </div>
      <div class="my-right iconfont">
        &#xe64e;
      </div>
    </div>
    <div class="my-fl">
      <dl>
        <dt><img src="../assets/logo.png"></dt>
        <dd>红包</dd>
      </dl>
      <dl>
        <dt><img src="../assets/logo.png"></dt>
        <dd>金币</dd>
      </dl>
    </div>
    <div class="fe">
      <div class="lexi">
        <span><img src="../assets/logo.png"></span>
        <span>我的地址</span>
        <span> > </span>
      </div>
    </div>
    <div class="fe">
      <div class="lexi">
        <span><img src="../assets/logo.png"></span>
        <span>金币商城</span>
        <span> > </span>
      </div>
      <div class="lexi">
        <span><img src="../assets/logo.png"></span>
        <span>分享拿5元现金</span>
        <span> > </span>
      </div>
    </div>
    <div class="fe">
      <div class="lexi">
        <span><img src="../assets/logo.png"></span>
        <span>我的客服</span>
        <span> > </span>
      </div>
      <div class="lexi">
        <span><img src="../assets/logo.png"></span>
        <span>下载饿了么APP</span>
        <span> > </span>
      </div>
    </div>
    <my-footer></my-footer>
  </div>
</template>

<script>
import myFooter from "@/components/myFooter";
export default {
  components: {
    myFooter
  }
};
</script>

<style lang="less">
.pxToRem(@p,@px) {
  @{p}: @px / 75 * 1rem;
}
.my {
  .dingdan_top {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 999;
    width: 100%;
    color: #fff;
    .pxToRem(line-height,100);
    background: #2395ff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    i {
      .pxToRem(font-size,50);
    }
    span {
      .pxToRem(font-size,40);
      position: absolute;
      top: 0;
      left: 45%;
      font-weight: 900;
    }
  }

  .pxToRem(margin-top,88);
  .pxToRem(margin-bottom,104);
  .my-top {
    background: #2395ff;
    box-sizing: border-box;
    .pxToRem(padding,30);
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
    .my-left {
      .pxToRem(width,120);
      .pxToRem(margin-right,20);
      img {
        width: 100%;
      }
    }
    .my-center {
      flex: 1;
      flex-direction: column;
      display: flex;
      span {
        font-weight: bold;
        .pxToRem(font-size,40);
      }
      p {
        .pxToRem(margin-top,20);
        display: flex;
        align-items: center;
        span {
          .pxToRem(margin-right,10);
          .pxToRem(width,30);
          img {
            width: 100%;
          }
        }
      }
    }
    .my-right {
      .pxToRem(width,60);
      text-align: center;
      .pxToRem(font-size,26);
    }
  }
  .my-fl {
    width: 100%;
    display: flex;
    dl {
      flex: 1;
      border-right: 1px solid #ddd;
      display: flex;
      justify-content: center;
      flex-direction: column;
      align-items: center;
      padding: 2% 0;
      background: #fff;
      &:last-child {
        border: none;
      }
      dt {
        .pxToRem(width,60);
        img {
          width: 100%;
        }
      }
      dd {
        margin-top: 2%;
        color: #666;
        font-weight: bold;
      }
    }
  }
  .fe {
    .pxToRem(margin-top,20);
    background: #fff;
    .pxToRem(padding-left,20);
    .pxToRem(padding-right,20);
    .lexi {
      display: flex;
      justify-content: center;
      align-items: center;
      border-bottom: 1px solid #ddd;
      padding-top: 2%;
      padding-bottom: 2%;
      &:last-child {
        border-bottom: none;
      }
      span {
        &:nth-child(1) {
          .pxToRem(margin-right,10);
          .pxToRem(width,60);
          img {
            width: 100%;
          }
        }
        &:nth-child(2) {
          flex: 1;
          .pxToRem(font-size,30);
          color: #333;
        }
        &:nth-child(3) {
          .pxToRem(width,60);
          .pxToRem(font-size,30);
          text-align: center;
        }
      }
    }
  }
}
</style>
